/* eslint-disable @typescript-eslint/ban-types */
<template>
    <div class="container">
        <div class="block">
            <div class="block-box">
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        旧密码
                    </div>
                    <el-input placeholder="请输入旧密码" show-password v-model="oldCode"/>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important" >*</span>
                        新密码
                    </div>
                    <el-input placeholder="请输入新密码" show-password v-model="newCode" @blur="blurNewCode"/>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        确认密码
                    </div>
                    <el-input placeholder="请确认密码" show-password @blur="blurConfirmCode" v-model="confirmCode"/>
                </div>
                <div class="row row-alone">
                    <button class="btn" @click="onModifyCode">确认</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup></script>
<script lang="ts">
import { defineComponent } from 'vue'
import { modifyPassword } from '@/api/base'
export default defineComponent({
    name: 'CodeChange',
    data () {
        return {
            oldCode: '',
            newCode: '',
            confirmCode: '',
            isConfirmCode: false
        }
    },

    methods: {
        async onModifyCode () {
            if (!this.oldCode) {
                this.$message.error('请输入原密码')
                return
            }
            if (this.newCode.length < 6) {
                this.$message.error('新密码至少输入六位')
                return
            }
            if (this.isConfirmCode) {
                await modifyPassword({
                    newPassword: this.newCode,
                    oldPassword: this.oldCode
                })
                this.$message.success('密码修改成功')
                this.$router.push({
                    path: '/'
                })
            }
        },
        blurConfirmCode () {
            if (this.confirmCode !== this.newCode) {
                this.$message.error('请确认两次密码是否同样')
                this.isConfirmCode = false
            } else if (this.newCode.length < 6) {
                this.isConfirmCode = false
            } else {
                this.isConfirmCode = true
            }
        },
        blurNewCode () {
            // if (this.newCode.length < 6) {
            //     this.$message.error('请至少输入六位')
            //     this.isConfirmCode = false
            // } else {
            //     this.isConfirmCode = true
            // }
        }
    }
})
</script>

<style lang="stylus" scoped>
.block
    min-height 694px
.block-box
    width 700px
    margin 0 auto
    padding 72px
    .row
        margin-top 24px
        .name
            width 100px
.row-alone
    justify-content right
</style>
